<template>
<van-nav-bar
  title="商品详情"
  left-text="返回"
  left-arrow
  @click-left="$router.back()"
  fixed placeholder
/>

<div class="detail-product">
  <img :src="DetailData.coverImage" alt="">
 <van-text-ellipsis :content="DetailData.name" expand-text="展开" collapse-text="收起" />
商品价格：<span>{{DetailData.price}}</span>
<div id="content">
  <!-- <div v-html="DetailData.content" ></div> -->
</div>

</div>

  <van-action-bar placeholder>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>


</template>


<script setup>
import {ProductDetailRequest} from '@/API/home'
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
let Route=useRoute()
let DetailData=ref({})
console.log(Route.query.id);

//跳转到商品详情页
function ProductDetail(id){
  ProductDetailRequest(id).then((r)=>{
    console.log(r.data.data);
    DetailData.value=r.data.data
  })
}
ProductDetail(Route.query.id)
</script>


<style scoped>
body {
  width: 100vw;
}
 #content img{
  width: 100%;
}
.van-nav-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
}
.van-action-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
}
.detail-product img{
  width: 100%;
}
</style>
